<template>
    <div>
        <el-form label-width="100"
                 ref="queryConditionForm" :model="queryCondition" :rules="rules">
            <el-row gutter="20">
                <el-col :span="6">
                    <el-form-item prop="similarNickName">
                        <el-input v-model.trim="queryCondition.similarNickName">
                            <template slot="prepend"><span>昵称</span></template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="sellerCode">
                        <el-input v-model="queryCondition.sellerCode">
                            <template slot="prepend"><span>流水号</span></template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row gutter="20">

                <el-col :span="6">
                    <el-form-item prop="minMemberBalance">
                        <el-input v-model="queryCondition.minMemberBalance">
                            <template slot="prepend">余额最小值</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="maxMemberBalance">
                        <el-input  v-model="queryCondition.maxMemberBalance">
                            <template slot="prepend">余额最大值</template>
                        </el-input>
                    </el-form-item>
                </el-col>

            </el-row>
            <el-form-item>
                <el-button type="primary" icon="el-icon-edit"
                           @click="querySellers(1)">查询
                </el-button>
                <el-button type="warning" icon="el-icon-remove"
                           @click="resetForm">重置
                </el-button>
                <el-button type="danger" icon="el-icon-check"
                           @click="newSeller">新增
                </el-button>
            </el-form-item>
        </el-form>
        <seller-new ref="addSeller" @addOver="queryNew"></seller-new>
        <el-table :data="results"
                  stripe="true">
            <el-table-column prop="sellerCode" label="流水号"></el-table-column>
            <el-table-column prop="member.nickName" label="账户昵称"></el-table-column>
            <el-table-column prop="member.balance" label="账户余额"></el-table-column>
            <el-table-column prop="createDate" label="注册日期"></el-table-column>
            <el-table-column label="操作" width="200" fixed="left">
                <template slot-scope="scope">
                    <el-button-group>
                        <el-button type="primary" icon="el-icon-edit"
                                   @click="editSeller(scope.row)">编辑
                        </el-button>
                        <el-button type="warning" icon="el-icon-delete"
                                   @click="deleteSeller(scope.row)">删除
                        </el-button>
                    </el-button-group>

                </template>
            </el-table-column>
        </el-table>
        <seller-core ref="detail" @close="query">
            <el-button>{{"当前页数："+(queryCondition.pageNum)}}</el-button>
        </seller-core>
        <div class="el-pagination">

            <el-pagination layout="total, prev, pager, next, jumper"
                           :total="total" :current-page="queryCondition.pageNum"
                           :page-size="queryCondition.pageSize"
                           @current-change="querySellers">

            </el-pagination>
        </div>
    </div>


</template>

<script>
    import {mapMutations, mapActions} from 'vuex'
    import SellerCore from '../components/SellerCore'
    import SellerNew from '../components/SellerNew'

    export default {
        components: {
            'seller-core': SellerCore,
            'seller-new': SellerNew,
        },
        data: function () {
            return {
                queryCondition: {
                    maxMemberBalance: 0,
                    minMemberBalance: 0,
                    pageNum: 0,
                    pageSize: 3,

                    sellerCode: "",
                    similarNickName: ""
                },
                results: [{
                    id: 0,
                    sellerCode: "Seller_sample",
                    member: {
                        balance: 1000,
                        nickName: "孙_66"
                    },
                    createDate: "2018-10-10"
                },
                ],
                total: 0,
            }
        },
        computed: {},
        methods: {
            query: function () {
                this.$http({
                    url: 'http://localhost:8899/sellers',
                    method: 'post',
                    data: this.queryCondition,
                }).then(res => {
                    //这里是分页的返回，data是分页信息，content是list信息
                    this.$message.warning(JSON.stringify(res.data));
                    this.results = res.data.results;

                    this.total = res.data.total;
                }).catch(console.log)
            },
            ...mapMutations([
                'setSellerCode'
            ]),
            ...mapActions([
                /*'findSellerBySellerCode'*/
            ]),
            editSeller: function (seller) {

                this.setSellerCode(seller.sellerCode);
                this.$refs.detail.init(seller.sellerCode);
            },
            newSeller: function () {
                this.$refs.addSeller.init();
            },
            deleteSeller: function (seller) {
                //todo:删除注意,一般的一多关系中,新建顺序,由一到多,删除顺序由多到一,查询操作从多的一端思考比较好
                console.log(seller);
                this.$message.warning('由于涉及到一个卖家有好多商品，商品信息目前不做删除，所以本功能暂时不开　'
                    + JSON.stringify(seller));
                /*this.$http({
                    url: 'http://localhost:8899/seller/'+seller.sellerCode,
                    method:'delete',
                }).then(res => {
                    this.$message.warning(res);
                    this.query();
                })*/
            },
            querySellers: function (val) {
                //todo;

                this.queryCondition.pageNum = val;
                this.query();
            },
            queryNew: function (sellerCode) {
                this.resetForm();
                this.queryCondition.sellerCode = sellerCode;
                this.query();
            },
            resetForm: function () {
                this.$refs['queryConditionForm'].resetFields();

            },
        },
        mounted: function () {
            this.query();
        },

        created: function () {

        },
        name: "Seller"
    }
</script>

<style scoped>

</style>
